<template>
  <div class="home">
    <div class="main-content">
      <h2>陆家镇农村房屋规划建设平台</h2>
      <div class="telDiv">
        <input
          type="text"
          id="phone"
          placeholder="请输入账号"
          v-model="username"
        />
      </div>
      <div class="codeDiv">
        <input
          type="password"
          id="code"
          placeholder="请输入密码"
          v-model="password"
        />
      </div>
      <van-button type="info" size="large" @click="login">登录</van-button>
      <h1 class="beizhu">备注：</h1>
      <p>
        1.
        一个账号只能验证三次，如果三次密码错误，则锁定该账号，请联系管理员解除锁定;
      </p>
    </div>
    <!-- <button @click="getZ">获取载体数据</button> -->
  </div>
</template>

<script>
import api from "@/api/api.js";
import local from '@/util/localstorage.js'
export default {
  name: "home",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      if (this.username === "") {
        this.$toast.fail("请输入用户名");
        return;
      } else if (this.password === "") {
        this.$toast.fail("密码不能为空");
        return;
      }

      api
        .login({ username: this.username, password: this.password })
        .then((res) => {
          console.log(res.data.jsonData);
          if(res.data.success){
            this.$toast.success('登录成功')
            local.setLoaclStorage('userInfo', res.data.jsonData)
            setTimeout(() => {
              this.$router.push('/about')
            }, 2000)
          }else {
            this.$toast.fail('用户名或密码错误');
          }
        });
    },
    getZ(){
      api.getZ({ztlx: '商务楼宇',ztmc: '*科技*', pageSize: 100}).then(res => {
        console.log(res)
      })
    },
  },
  created() {
    var bg = document.querySelector('body');
    bg.style.backgroundColor = '#fff';
  },
};
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0 16px;
  box-sizing: border-box;
  overflow: hidden;
  ::-webkit-input-placeholder {
    /*Webkit browsers 谷歌*/
    color: #ccc;
  }

  :-moz-placeholder {
    /*Mozilla Firefox 4 to 8 火狐*/
    color: rgba(164, 164, 164, 1);
  }

  ::moz-placeholder {
    /*Mozilla Firefox 19+ 火狐*/
    color: rgba(164, 164, 164, 1);
  }

  :-ms-input-placeholder {
    /*Internet Explorer 10+ IE10以上*/
    color: rgba(164, 164, 164, 1);
  }
  .main-content {
    h2 {
      margin: 44px 0 32px;
      height: 64px;
      font-size: 24px;
      line-height: 64px;
    }
    .telDiv {
      margin-bottom: 10px;
      border-bottom: 2px solid rgb(187, 187, 187);
      #phone {
        width: 100%;
        height: 42.5px;
        border: 0;
        font-size: 15px;
        outline: none;
        // border-bottom: 2px solid gray;
      }
    }
    .codeDiv {
      margin-bottom: 50px;
      width: 100%;
      height: 43.5px;
      border-bottom: 2px solid rgb(187, 187, 187);
      #code {
        width: 100%;
        height: 42.5px;
        border: 0;
        font-size: 15px;
        outline: none;
      }
    }

    .beizhu {
      margin-top: 20px;
      font-size: 13px;
      font-weight: lighter;
      text-align: left;
    }

    p {
      text-align: left;
      margin-top: 10px;
      font-size: 12px;
      color: red;
    }
  }
}
</style>